import React, { useEffect, useState } from "react";
import { View } from "@tarojs/components";
import { SearchBar } from "../../components/search-bar";
import { InviteMember } from "../../components/invite-member";
import { fetchMember, fetchRole } from "../../api";
import { debounce } from "debounce";

import "./index.scss";
import { IMember, IRole } from "src/interfaces";
import Taro, { getCurrentInstance } from "@tarojs/taro";
import { getOssUrl, isIos } from "../../utils";
import { ImageWithText } from "../../components/img";
import classNames from "classnames";

interface roleListType {
  [x: string]: string;
}
const Index = () => {
  const [originMemberList, setOriginMemberList] = useState<IMember[]>([]);
  const [memberList, setMemberList] = useState<IMember[]>([]);
  const [roleList, setRoleList] = useState<roleListType>();
  const [searchValue, setSearchValue] = useState("");
  const [isOpenedInvite, setIsOpenedInvite] = useState(false);
  useEffect(() => {
    const { router } = getCurrentInstance();
    const spaceId = router?.params?.spaceId || "";
    if (!spaceId) {
      alert("没有空间id");
      return;
    }
    const init = async () => {
      Taro.showLoading();
      const [getMemberRes, getRoleRes] = await Promise.all([
        fetchMember(spaceId),
        fetchRole(spaceId),
      ]);
      Taro.hideLoading();
      // 成员信息
      if (getMemberRes?.code === 0) {
        const outMemberList = getMemberRes?.data.filter(
          (item: IMember) => item?.memberType === "out"
        );
        setOriginMemberList(outMemberList);
        setMemberList(outMemberList);
      } else {
        alert(getMemberRes?.message);
      }
      if (getRoleRes?.code === 0) {
        const roles: roleListType = {};
        getRoleRes?.data.forEach((item: IRole) => {
          roles[item?.id] = item?.name;
        });
        setRoleList(roles);
      } else {
        alert(getMemberRes?.message);
      }
    };
    init();
  }, []);
  const handleInput = (v: string) => {
    setSearchValue(v);
    getMemberList(v);
  };
  const getMemberList = debounce((v) => {
    const filterMember = originMemberList.filter((item) => {
      return item?.nickName?.includes(v);
    });
    setMemberList(filterMember);
  }, 300);
  return (
    <View className={classNames("project-members")}>
      <div>
        <View className="nav-bar">
          <span
            className="iconfont icon-left-line go-back"
            onClick={() => {
              Taro.navigateBack();
            }}
          ></span>
          <span className="title">成员管理</span>
          <div
            className="invite-btn"
            onClick={() => {
              setIsOpenedInvite(true);
            }}
          >
            <span className="iconfont icon-chuangjianpeople invite-icon"></span>
            <span className="invite">邀请</span>
          </div>
        </View>
        <SearchBar value={searchValue} onInput={handleInput} />
      </div>
      <div
        className={classNames("container", {
          padding: isIos(),
        })}
      >
        <div className="list-container">
          {memberList?.map((item: IMember) => {
            return (
              <View key={item?.id} className="member-list">
                <ImageWithText
                  className="first-name"
                  src={getOssUrl({
                    bucketName: item?.img?.bucketName,
                    path: item?.img?.path,
                  })}
                  text={item?.nickName}
                />
                <div className="display-i-b part-of-right">
                  <span className="name ellipsis">{item?.nickName}</span>
                  <span className="permission">{roleList?.[item?.roleId]}</span>
                </div>
              </View>
            );
          })}
        </div>
      </div>
      <InviteMember isOpened={isOpenedInvite} setIsOpened={setIsOpenedInvite} />
    </View>
  );
};

export default Index;
